<template>
    <div>
        <h3>vue的设计模式是双向数据绑定</h3>
        <h5>{{ msg }}</h5>
        <span>年龄：</span> {{ age }}
        <input type="text" v-model.number="age">
        <span>人生格言：</span> {{ motto }}
        <input type="text" v-model.trim="motto"><br>
        <span>自我介绍：</span> {{ instr }}
        <textarea v-model.lazy="instr"></textarea>
    </div>
    <VmodelT v-model="message"></VmodelT>
</template>

<script setup lang="ts">
import VmodelT from './VmodelT.vue'
import { ref } from 'vue'
const msg = "视图发生改变 数据发生改变 数据发生改变 视图也发生改变"
const age = ref()
const motto = ref("")
const instr = ref("")
const message =ref("hello vue3")
</script>

<style scoped>

</style>